﻿@using System.Diagnostics

@{
  Layout = "_Layout";
  var version =
  FileVersionInfo.GetVersionInfo(typeof(IdentityServer4.Hosting.IdentityServerMiddleware).Assembly.Location).ProductVersion.Split('+').First();
}


<div id="changePassword">
  <el-form ref="changePasswordForm" :rules="changeRules" label-position="top" label-width="80px"
    v-bind:model="changePasswordForm" size="small">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input type="password" v-model="changePasswordForm.oldPassword" show-password show-word-limit></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input type="password" v-model="changePasswordForm.newPassword" show-password show-word-limit>
      </el-input>
    </el-form-item>
    <el-form-item label="密码确认" prop="checkNewPassword">
      <el-input type="password" v-model="changePasswordForm.checkNewPassword" show-password show-word-limit>
      </el-input>
    </el-form-item>
    <el-form-item style="text-align: center;">
      <el-button class="rgBtn" type="primary" v-on:click="changePassword()">保存</el-button>
    </el-form-item>

  </el-form>

</div>

@section scripts
{
<script>
  var vm = new Vue({
    el: '#changePassword',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.changePasswordForm.newPassword !== '') {
            this.$refs.changePasswordForm.validateField('checkNewPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入新密码'));
        } else if (value !== this.changePasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        changePasswordForm: {
          oldPassword: '',
          newPassword: '',
          checkNewPassword: '',
          returnUrl: ""
        },
        changeRules: {
          oldPassword: [
            { required: true, message: '请输入旧密码', trigger: 'blur' },
            { min: 6, message: '长度不低于6个字符', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '长度不低于6个字符', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
          checkNewPassword: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { min: 6, message: '长度不低于6个字符', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      changePassword() {
        this.$refs.changePasswordForm.validate().then((res) => {
          if (res) {
            put("changepassword", this.changePasswordForm).then(res => { console.log(res); })

          }
        })
      }
    },
    created: function () {
      this.changePasswordForm.returnUrl = '@Html.Raw(@Context.Request.Query["returnUrl"])';
    }
  })
</script>
}
@section styles{
<style>
  #changePassword {
    width: 300px;
    background-color: rgba(255, 255, 255, 1);
    padding: 15px;
    border-radius: 5px;
  }

  .changePasswordForm .el-form-item {

    margin-bottom: 15px;
  }

  .changePasswordForm {
    padding: 20px;
    opacity: 0.8;
    border-radius: 5px;
    background-color: white;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .changePasswordForm>h1 {
    text-align: center;
    margin-bottom: 50px;
  }

  .el-form-item__label {
    font-weight: bold;
    padding: 0px !important;
  }

  .el-checkbox__label {}
</style>

}
